<template>
  <div class="object">
    <SSection name="对象类型属性">
      <SProp label="名称" :data="objName" @update:data="onUpdateObjName">
      </SProp>

      <SProp label="插件">
        <div style="color: #999999">
          {{ bundleLabel }}
        </div>
      </SProp>
    </SSection>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, toRaw } from 'vue';
import SSection from '@/ui-kit/section/section.vue';
import SProp from '@/ui-kit/prop/prop.vue';
import SInput from '@/ui-kit/input/input.vue';
import plugStore from '../store/plugins';
import propertyStore from './store';
import assetsStore from '../store/assets';

export default defineComponent({
  name: 'obj',
  components: { SInput, SProp, SSection },
  emits: [],
  props: {},
  setup(props, { emit }) {
    const bundleLabel = computed(() => {
      const bundle = toRaw(propertyStore().bundle);
      if (bundle) {
        const data: sail.GameObject | null = plugStore().getObjectByID(bundle);
        if (data) {
          return data.info.name;
        }
      }
      return 'un-know';
    });

    const objName = computed(() => {
      const id = propertyStore().originObjectID;
      const asset = assetsStore().getAsset(id);
      if (asset) {
        return asset.name;
      }
      return 'un-know';
    });
    return {
      objName,
      bundleLabel,
      onUpdateObjName(val: string) {
        const id = propertyStore().originObjectID;
        assetsStore().renameAsset(id, val);
      },
    };
  },
});
</script>
<style scoped lang="scss">
.object {

}
</style>
